<template>
  <div style="padding: 2%;">
    <div class="flex-column">
      <div class="ledSystemBox">
        <div class="ledSystemBox-header">控制方式</div>
        <div class="ledSystemBox-list" style="color: #aa0000;">
          <span>u = d</span>
          <el-divider direction="vertical"></el-divider>
          <span>灯灭</span>
        </div>
        <div class="ledSystemBox-list" style="color: #00aa00;">
          <span>u != d</span>
          <el-divider direction="vertical"></el-divider>
          <span>灯亮</span>
        </div>
      </div>
      <div style="margin-top: 20px">
        <div style="font-weight: 400;font-size: 20px;color: #00557F;">LED 当前状态 : {{state}}</div>
        <div style="font-weight: 400;font-size: 20px;color: #00557F;">当前采集时间 : {{time}}</div>
        <div style="margin-top: 2%;">
          <button @click="openLed" style="width: 80px;border-radius: 6px;font-size: 18px;">开</button>
          <button @click="closeLed" style="width: 80px;border-radius: 6px;color: red;font-size: 18px;">关</button>
        </div>
      </div>
    </div>
    <!-- <div style="font-size: 20px;color: #00557F;">串口发送数据0 ==> led 灯灭</div>
    <div class="flex-column">
      <img src="../../../assets/img/ledControl2.jpg" width="35%"/>
      <img src='../../../assets/img/ledControl1.png' width="34%" style="margin-left: 1%;"/>
    </div>
    <div style="font-size: 20px;color: #00557F;margin-top: 2%;">串口发送数据1 ==> led 灯亮</div>
    <div class="flex-column m-l12">
      <img src="../../../assets/img/ledControl4.jpg" width="38%"/>
      <img src='../../../assets/img/ledControl3.png' width="37%" style="margin-left: 1%;"/>
    </div>-->
    <!-- <div class="banner">
      <div class="item">
        <img :src="imgSrc[currentIndex]" width="50%">
      </div>
      <div  v-if="this.imgSrc.length > 1">
        <div @click="gotoPage(prevIndex)" class="prev">&lt;</div>
        <div @click="gotoPage(nextIndex)" class="next">&gt;</div>
        <ul class="flexRow page">
          <li v-for="(item,index) in imgSrc" @click="gotoPage(index)" :class="{'current':currentIndex == index}" style="margin-left: 30px;"> </li>
        </ul>
        </div>
    </div> -->
  </div>
</template>

<script>
  export default {
    name: 'ledControl',
    data() {
      return {
        imgSrc: [
          '../../../../static/imageUrls/ledControl1.png',
          '../../../../static/imageUrls/ledControl2.jpg',
          '../../../../static/imageUrls/ledControl3.png',
          '../../../../static/imageUrls/ledControl4.jpg'
        ],
        currentIndex: 0,
        timer: null,
        state: '关',
        time: ''
      }
    },
    methods: {
       gotoPage(index) {
          this.currentIndex = index;
        },
        //定时器
        runInv() {
          this.timer = setInterval(() => {
            this.gotoPage(this.nextIndex)
          }, 4000)
        },
        openLed() {
          axios
          	.get('http://172.22.36.77:12000/api/led/start')
            .then(response => {
              this.state = "开";
              this.$message('LED 灯已亮');
            })
          	.catch(function(error) { // 请求失败处理
          		console.log(error);
          	});
        },
        closeLed() {
          axios
          	.get('http://172.22.36.77:12000/api/led/stop')
          	.then(response => {
              this.state = "关";
              this.$message({
                message: 'LED 灯已灭',
                type: 'warning'
              });
          	})
          	.catch(function(error) { // 请求失败处理
          		console.log(error);
          	});
        }
    },
    mounted() {
      this.runInv();
      //获取实时时间
      // setInterval(() => {
      //   var a = new Date();
      //   var b = a.toLocaleTimeString();
      //   var c = a.toLocaleDateString();
      //   this.time = c + b;
      // },1000);
      setInterval(() => {
        axios
        	.get('http://172.22.36.77:12000/api/led/read')
        	.then(response => {
            if(response.data.Led状态 == null || response.data.Led状态 == '') {
              this.state = '更新中';
            }
            if(response.data.响应时间 == null || response.data.响应时间 == '') {
              this.time = '获取响应时间中';
            }else {
              this.state = response.data.Led状态;
              this.time = response.data.响应时间;
            }
            // this.state = response.data.Led状态;
        	})
        	.catch(function(error) { // 请求失败处理
        		console.log(error);
        	});
      },3000);
    },
    computed: {
      //上一张
      prevIndex() {
        if(this.currentIndex == 0) {
          return this.imgSrc.length - 1;
        }else{
          return this.currentIndex - 1;
        }
      },
      //下一张
      nextIndex() {
        if(this.currentIndex == this.imgSrc.length - 1) {
          return 0;
        }else {
          return this.currentIndex + 1;
        }
      }
    }
  }
</script>

<style>
</style>
